<template>
    <div id="home">
    <header>
    <!-- 顶部分页栏 -->
      <van-tabs v-model="active">
        <van-tab title="医院" ></van-tab>
        <van-tab title="医生"></van-tab>
      </van-tabs>
      <van-divider />
      <!-- 搜索框 -->
      <van-search v-model="value" placeholder="请输入搜索关键词"  @focus="search" />
      <!-- 下来菜单 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </header>

    <main>
      <van-cell-group v-for="(item,index) in data ">
      <div class="mainbox">
        <van-image
          width="80"
          height="80"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="mainsmallbox">
          <p>{{item.name}}</p>
          <p>{{item.site}}</p>

          <div class="smallbox">
            <van-button type="primary" size="mini" color="skyblue">{{item.grade}}</van-button>
            <van-button type="primary" size="mini" color="skyblue">{{item.insurance}}</van-button>
            <p>已咨询:{{item.advisory}}</p>
            <p>{{item.distance}}</p>
          </div>
        </div>
        </div>
      </van-cell-group>
 
    
    </main>
    
      <footer>
        <van-tabbar v-model="active">
            <van-tabbar-item name="home" icon="wap-home-o" @click="home">战役</van-tabbar-item>
            <van-tabbar-item name="circle" icon="location-o" @click="circle">圈子</van-tabbar-item>
            <van-tabbar-item name="melancholy" icon="add-o" >寻医</van-tabbar-item>
            <van-tabbar-item name="news" icon="chat-o"  @click="news">消息</van-tabbar-item>
            <van-tabbar-item name="mine" icon="smile-o"  @click="mine">我的</van-tabbar-item>
        </van-tabbar>
      </footer>
      
    </div>
</template>
  
  <script>
export default {
  data() {
    return {
      active: 'melancholy',
      value: '',
      value1: 0,
      value2: 'a',
      value3: 'A',
      option1: [
        { text: '北京市', value: 0 },
        { text: '南京市', value: 1 },
        { text: '合肥市', value: 2 },
      ],
      option2: [
        { text: '朝阳区', value: 'a' },
        { text: '海淀区', value: 'b' },
        { text: '丰台区', value: 'c' },
      ],
      option3: [
        { text: '全部', value: 'A' },
        { text: '按字母排列', value: 'B' },
        { text: '按等级排列', value: 'C' },
      ],
      data:[
        {
          id:1,
          name:"首都医科大学附属北京朝阳医院",
          site:"北京朝阳区工人体育场南路8号",
          grade:"三甲",
          insurance:"医保",
          advisory:"999",
          distance:"999m"
        },
        {
          id:2,
          name:"首都医科大学附属北京朝阳医院",
          site:"北京朝阳区工人体育场南路8号",
          grade:"三甲",
          insurance:"医保",
          advisory:"999",
          distance:"999m"
        },
        {
          id:3,
          name:"首都医科大学附属北京朝阳医院",
          site:"北京朝阳区工人体育场南路8号",
          grade:"三甲",
          insurance:"医保",
          advisory:"999",
          distance:"999m"
        },
        {
          id:4,
          name:"首都医科大学附属北京朝阳医院",
          site:"北京朝阳区工人体育场南路8号",
          grade:"三甲",
          insurance:"医保",
          advisory:"999",
          distance:"999m"
        },
        {
          id:5,
          name:"首都医科大学附属北京朝阳医院",
          site:"北京朝阳区工人体育场南路8号",
          grade:"三甲",
          insurance:"医保",
          advisory:"999",
          distance:"999m"
        },

      ]
    }
  },
  methods:{
    search(){
      this.$router.push("/search")
    },
    home(){
    this.$router.push("/home")
   },
   circle(){
    this.$router.push("/circle")
   },
   news(){
    this.$router.push("/news")
   },
   mine(){
    this.$router.push("/mine")
   }
  }
    
}

  </script>

  <style scoped lang="less">
    header{
      .van-dropdown-menu{
        margin-bottom: 10px;
      }
    }
     footer{
          .van-hairline--top-bottom{
            .van-tabbar-item{
              font-size: 16px;
            }
          }
        }
    main{
      .mainbox{
        padding: 10px;
        display: flex;
        .mainsmallbox{
          padding-left: 10px;
          p{
            margin: 0;
          }
          p:nth-of-type(1){
            font-size: 16px;
          }
          p:nth-of-type(2){
            font-size: 14px;
            color: #666666;
            margin: 10px 0;
          }
          .smallbox{
            display: flex;
            align-items: center;
            p:nth-of-type(1){
            font-size: 14px;
            color:#666666;
            margin-left: 20px;
          }
          p:nth-of-type(2){
            margin: 0;
            margin-left: 66px;
          }
          }
        }
      }
      
    }

  </style>